
import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ScrollView,
  Image,
  TouchableOpacity,
} from 'react-native';
import {width} from '../common/common';
import {BASEURL} from '../api/api'
import {jumpPage} from '../common/common'
var IMG_URL =  BASEURL+'image/showImage?imageName=';
export default class VideoCenter extends Component {
  _goDetail(tempId, tempTitle){
    jumpPage(this.props.navigation,'tempDetail',{tempId,tempTitle,userId: this.props.userId})
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.headerView}>
          <View style={styles.leftViewStyle}>
            {/* <Image source={this.props.data.img} style={{width:this.props.imgW,height:23,marginRight:5}}/> */}
            <Text style={{paddingLeft:10,fontSize:17,color:'#000',fontWeight:'bold'}}>{this.props.data.title}</Text>
          </View>
          {/*<TouchableOpacity style={styles.rightViewStyle} onPress={this.props.press}>
            <Image source={require('../images/More.png')} style={{width:19,height:4,marginRight:10,marginLeft:5}}/>
          </TouchableOpacity> */}
        </View>
        <ScrollView style={styles.scrollViewStyle}
          horizontal={false}
          showsHorizontalScrollIndicator={false}
          showsVerticalScrollIndicator={false}
          >
          <View style={styles.wrapView}>
            {this.renderAllItem()}
          </View>
        </ScrollView>
      </View>
    );
  }
  renderAllItem(){
    var itemArr = [];
    var shopData = this.props.data.data;
    for(let i=0; i<shopData.length; i++){
      let data = shopData[i];
      itemArr.push(
        <ShopCenterItem

          press={()=>this._goDetail(data.tempId,data.tempTitle)}
          key={data.tempId}
          img={data.tempImg}
          text={data.tempTitle}
          shopName={data.name}
          detailurl={data.detailurl}
          popToShopCenter = {(url)=>this.popToHome(url)}
        />
      );
    }
    return itemArr;
  }
  popToHome(url){
    if(url){
      this.props.popToHomeView(url);
    }
  }
}
class ShopCenterItem extends Component{
  render(){
    //<Text style={styles.shopSaleStyle}>44444</Text>
    //console.log('prop',this.props);
    let img = this.props.img;
    if(img && img.indexOf('http') == -1){
      img = IMG_URL + img;
    }
    return(
      <TouchableOpacity activeOpacity={0.5} onPress={this.props.press}>
        <View style={[styles.itemViewStyle,this.props.viewStyle]}>
          <Image source={{uri: img}} style={styles.imageStyle}/>
          
          <Text style={styles.shopNameStyle}>{this.props.text}</Text>
          {/* <Text style={{color:'red'}}>免费</Text> */}
        </View>
      </TouchableOpacity>
    );
  }
  clickItem(detailurl){
    if(detailurl){
      this.props.popToShopCenter(detailurl);
    }
  }
}
const styles = StyleSheet.create({
  headerView: {
    height:40,
    flexDirection:'row',
    //backgroundColor:'white',
    justifyContent:'space-between',
    alignItems:'center',
    // borderColor:'#555',
    // borderWidth:0.5,
  },
  leftViewStyle:{
    flexDirection:'row',
    alignItems:'center',
    marginLeft:8,
    // borderColor:'red',
    // borderWidth:1,
  },
  rightViewStyle:{
    flexDirection:'row',
    alignItems:'center',
  },
  container: {
    //backgroundColor: '#f0f0f0',
  },
  scrollViewStyle:{
    //backgroundColor:'white',

  },
  wrapView:{
    flexDirection:'row',
    flexWrap:'wrap',
    borderColor:'red',
    justifyContent:'space-between',
    //borderWidth:StyleSheet.hairlineWidth,
  },
  itemViewStyle:{
		marginTop:6,
		backgroundColor:'white',
		padding:5,
    borderColor:'red',
    //borderWidth: StyleSheet.hairlineWidth,
    margin:0,
    shadowColor: 'rgba(0, 0, 0, 0.8)',
    shadowOffset: {
        width: 10,
        height: 3
    },
    shadowRadius: 2,
    elevation: 4,
  },
  imageStyle:{
    width:(width-10)/2-10,
    height:((width-10)/2-10)/16*9,
    resizeMode:'cover',
  },
  shopNameStyle:{
    textAlign:'left',
    marginTop:5,
    color:'#555',
    paddingLeft:0,
    paddingBottom:0,
  },
  shopSaleStyle:{
    position:'absolute',
    left:0,
    bottom:30,
    backgroundColor:'red',
    color:'white',
    padding:3,
    borderTopRightRadius:8,
    borderBottomRightRadius:8,
  },
});
